import React, { Suspense } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
import ErrorBoundary from "../components/ErrorBoundary";
import MediaDevicesCheck from "../components/MediaDevicesCheck";

const App = React.lazy(() => import("../App"));
const Login = React.lazy(() => import("../pages/Login/Login"));
const My = React.lazy(() => import("../pages/My/My"));
const Square = React.lazy(() => import("../pages/Square/Square"));
const Sao = React.lazy(() => import("../pages/My/Sao"));
const Liao = React.lazy(() => import("../pages/Liu/Liao"));
const VoiceRoom = React.lazy(() => import("../pages/Liu/voiceRoom"));
const RoomList = React.lazy(() => import("../pages/Liu/RoomList"));
const Ewm = React.lazy(() => import("../pages/My/Ewm"));
const Message = React.lazy(() => import("../pages/Message/Message"));
const SendAddress = React.lazy(() => import("../pages/map/SendAddress"));
const Liaotian = React.lazy(() => import('../pages/JBH/Liaotian'))
const Deposit= React.lazy(()=>import("../pages/My/Deposit"))
const DepositResult= React.lazy(()=>import("../pages/My/DepositResult"))
const Xiu= React.lazy(()=>import("../pages/My/Xiu"))

// 错误UI组件
const ErrorFallback = () => (
  <div
    style={{
      padding: "20px",
      margin: "20px auto",
      maxWidth: "600px",
      backgroundColor: "#fff",
      borderRadius: "8px",
      boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
      textAlign: "center",
    }}
  >
    <h2 style={{ color: "#e74c3c" }}>页面加载出错</h2>
    <p>很抱歉，加载页面时遇到问题。请尝试以下解决方案：</p>
    <ul style={{ textAlign: "left", lineHeight: "1.6", margin: "20px 0" }}>
      <li>检查您的网络连接</li>
      <li>使用Chrome、Firefox或Safari等现代浏览器</li>
      <li>刷新页面重试</li>
    </ul>
    <button
      onClick={() => window.location.reload()}
      style={{
        padding: "8px 16px",
        backgroundColor: "#3498db",
        color: "white",
        border: "none",
        borderRadius: "4px",
        cursor: "pointer",
        fontSize: "16px",
      }}
    >
      刷新页面
    </button>
  </div>
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <App></App>,
    children: [
      { path: "my", element: <My></My> },
      { path: "square", element: <Square></Square> },
      { path: "message", element: <Message></Message> },
    ],
  },
  { path: "/login", element: <Login></Login> },
  { path: "/sao", element: <Sao></Sao> },
  { path: "/liao", element: <Liao></Liao> },
  { path: '/liaotian', element: <Liaotian></Liaotian> },
  {path:"/deposit",element:<Deposit></Deposit>},
    {path:"/my/deposit/result",element:<DepositResult></DepositResult>},
    {path:"/xiu",element:<Xiu></Xiu>},
  {
    path: "/voiceroom",
    element: (
      <ErrorBoundary>
        <Suspense fallback={<div>加载中...</div>}>
          <MediaDevicesCheck>
            <VoiceRoom />
          </MediaDevicesCheck>
        </Suspense>
      </ErrorBoundary>
    ),
    errorElement: <ErrorFallback />,
  },
  {
    path: "/rooms",
    element: (
      <ErrorBoundary>
        <Suspense fallback={<div>加载中...</div>}>
          <RoomList />
        </Suspense>
      </ErrorBoundary>
    ),
    errorElement: <ErrorFallback />,
  },
  { path: "/er", element: <Ewm></Ewm> },
  { path: "/sendAddress", element: <SendAddress></SendAddress> },
]);

export default router;
